import React, { Component } from 'react'

export default class BoxColor extends Component {
  // 1. 声明状态. 选择状态的原则: 谁在变化, 就将谁声明成状态
  state = {
    bg: '#aef',
    bg2: '#c8f',
    flag: true
  }

  render() {
    // 解构赋值
    let {bg, bg2, flag} = this.state;
    return (
      // 2. 使用状态值来控制元素的样式
      <div onClick={this.changeBg} style={{width: '400px', height: '300px', background: flag ? bg : bg2}}> </div>
    )
  }

  // 3. 声明 changeBg 方法
  changeBg = () => {
    //更新状态
    this.setState({
      // bg: '#98f'
      flag: !this.state.flag
    })
  }
}
